<template>
  <div id="cont" class="tab-detail">
    <Form ref="detail" :rules="formValidate" :label-width="140" :model="detail">
      <Row wrap style="align-items: flex-start;margin-bottom:5px;display:block">
        <Col :lg="8" :xs="24">
          <FormItem prop="image" :label-width="50">
            <div class="detail-image-box">
              <viewer :images="detail.image">
                <img
                  style="max-width:100%;max-height:230px"
                  :src="detail.image"
                  v-if="detail.image"
                  alt=""
                  readonly
                />
              </viewer>
            </div>
          </FormItem>
        </Col>
        <Col :lg="8" :xs="24">
          <FormItem label="名称" prop="name">
            <Input v-model="detail.name" readonly />
          </FormItem>
          <FormItem label="温度(℃)" prop="temperature">
            <Input
              type="number"
              v-model.number="detail.temperature"
              style="width:100%"
              :max="200"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="湿度(%)" prop="humidity">
            <Input
              type="number"
              v-model.number="detail.humidity"
              style="width:100%"
              :max="100"
              :min="0"
              readonly
            />
          </FormItem>
        </Col>
        <Col :lg="8" :xs="24">
          <FormItem label="大气压力(bar)" prop="pressure">
            <Input
              type="number"
              v-model.number="detail.pressure"
              style="width:100%"
              :max="100"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="空气密度(kg/m^3)" prop="airDensity">
            <Input
              type="number"
              v-model.number="detail.airDensity"
              style="width:100%"
              :max="2"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem :label-width="30">
            其他人是否可见
            <i-switch
              v-model="detail.isIndexShow"
              :true-value="1"
              :false-value="0"
              disabled
            />
            其他人是否可用
            <i-switch
              v-model="detail.otherCanUse"
              :true-value="1"
              :false-value="0"
              disabled
            />
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import { atmosphereApi } from "@/api/atmosphere";
export default {
  name: "WeelDetail",
  components: {},
  props: {
    /* id:{type:String} */
  },
  data() {
    return {
      id: null,

      detail: null, // 发动机详情
      // 表单验证
      formValidate: {
        // 名称
        name: [{ required: true, message: "请输入名称", trigger: "change" }],
        // 温度(℃)
        temperature: [
          {
            type: "number",
            required: true,
            message: "请输入温度(℃)",
            trigger: "change"
          }
        ],
        // 湿度(%)
        humidity: [
          {
            type: "number",
            required: true,
            message: "请输入湿度(%)",
            trigger: "change"
          }
        ],
        // 大气压力(bar)
        pressure: [
          {
            type: "number",
            required: true,
            message: "请输入大气压力(bar)",
            trigger: "change"
          }
        ],
        // 空气密度(kg/m^3)
        airDensity: [
          {
            type: "number",
            required: true,
            message: "请输入空气密度(kg/m^3)",
            trigger: "change"
          }
        ],
        // 图片
        image: [{ required: true, message: "请上传图片", trigger: "change" }]
      }
    };
  },
  watch: {},
  mounted() {
    this.id = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    // 获取发动机详情数据
    getDetail() {
      atmosphereApi.getById(this.id).then(res => {
        this.detail = res.data;
      });
    }
  }
};
</script>
<style>
#cont {
  background-color: #fff;
  padding: 30px 30px 0 30px;
}

.tab-detail {
  margin-bottom: 50px;
}
.tab-detail input {
  background-color: #f4f4f4 !important;
}
.tab-detail span {
  color: #000 !important;
}
.tab-detail i {
  display: none !important;
}
.detail-image-box {
  width: 100%;
  margin-bottom: 10px;
  height: 230px;
  border: 1px dashed #dcdee2;
  text-align: center;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}
</style>
